<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>销售分析</title>
    <link rel="stylesheet" type="text/css" href="/static/plugins/easyui/themes/material/easyui.css">
    <link rel="stylesheet" type="text/css" href="/static/plugins/easyui/themes/icon.css">
    <script type="text/javascript" src="/static/plugins/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/static/plugins/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/plugins/easyui/locale/easyui-lang-zh_CN.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script src="/static/plugins/echart/echarts.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#sale_datagrid").datagrid({
                fit:true,
                fitColumns:true,// 列自动收缩
                singleSelect:true,// 单选
                pagination:true,// 分页
                rownumbers:true,// 显示行号
                toolbar:"#sale_dg_tb",
                url:"/cashier/saleAnalyzeList.do",
                columns:[[
                    {field:'pSn',title:'产品编码',width:100},
                    {field:'pName',title:'商品名',width:100},
                    {field:'number',title:'销售数量',width:100},
                    {field:'amount',title:'销售总金额',width:100},
                    {field:'maori',title:'毛利',width:100},
                ]]
            });
        })


        // 刷新
        function reload() {
            $("#sale_datagrid").datagrid("load");
        }

        // 导出
        function exp() {
            window.location.href = "/saleAnalysis/exportData.do";
        }

    </script>
</head>
<body>

    <div id="cc" class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west',split:false" style="width:60%">
            <table id="sale_datagrid"></table>
            <div id="sale_dg_tb">
                <a class="easyui-linkbutton" onclick="reload();" data-options="iconCls:'icon-reload',text:'刷新',plain:true"></a>
                <a class="easyui-linkbutton" onclick="exp();" data-options="iconCls:'icon-redo',text:'导出',plain:true"></a>
            </div>
        </div>

        <div data-options="region:'center'">
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="main" style="width: 40%;height: 100%;"></div>
            <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                option = {
                    title : {
                        text: '销售报表',
                        subtext: '销售总额',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: []
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            dataView : {show: true, readOnly: true},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    series : [
                        {
                            name: '销售总额',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data: [],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                // 数据加载完之前先显示一段简单的loading动画
                myChart.showLoading();

                $.get("/saleAnalysis/saleByPie.do", function (data) {
                    myChart.hideLoading();// 隐藏加载动画
                    if (data) {
                        myChart.setOption({// 加载数据图表
                            legend: {
                                data: data.x
                            },
                            series: [{
                                // 根据名字对应到相应的系列
                                data: data.datas
                            }]
                        });
                    }
                })

            </script>
        </div>
    </div>

</body>
</html>
